<template>
	<view class="content">
		<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap"></swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight+'px'}"
			:current="tabIndex" @change="tabChange">
				<swiper-item v-for="(info,index) in infoList" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="info.list.length>0">
						<block v-for="(item,idx) in info.list" :key="idx">
							<index-list :item="item"></index-list>
						</block>
						<!-- 上拉加载 -->					
						<load-more :loadtext="info.loadtext"></load-more>
						</template>
						<template v-else>
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from '../../components/index/index-list.vue';
	import swiperTabHead from '../../components/index/swiper-tab-head.vue';
	import loadMore from '../../components/common/load-more.vue';
	import noThing from '../../components/common/no-thing.vue';
	export default {
		components: {
			indexList,
			swiperTabHead,
			loadMore,
			noThing
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [
					{ name: "关注", id:"guanzhu"},
					{ name: "推荐", id:"tuijian"},
					{ name: "体育", id:"tiyu"},
					{ name: "热点", id:"redian"},
					{ name: "财经", id:"caijing"},
					{ name: "娱乐", id:"yule"}
				],
				swiperHeight: 500,
				infoList:[
					{
						loadtext: "上拉加载更多",
						list: [
							{
								sex: 0, //0男 1女
								age: 24,
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "大大的标题",
								type: "img", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 0,	// 0-没有操作，1-顶，2-踩
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								sex: 0, //0男 1女
								age: 24,
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "大大的标题",
								type: "video", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 2,	// 0-没有操作，1-顶，2-踩
									dingnum: 12,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "大大的标题",
								type: "img", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 0,	// 0-没有操作，1-顶，2-踩
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "大大的标题",
								type: "video", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 2,	// 0-没有操作，1-顶，2-踩
									dingnum: 12,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "大大的标题",
								type: "img", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 0,	// 0-没有操作，1-顶，2-踩
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							},
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: true,
								title: "大大的标题",
								type: "video", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 2,	// 0-没有操作，1-顶，2-踩
									dingnum: 12,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							}
						]
					},
					{
						list: []
					}
				]
				
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res)=>{
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperHeight = height; 
				}
			})
		},
		//监听搜索框点击事件
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url: "../search/search"
			})
		},
		onNavigationBarButtonTap(e){
			switch(e.index){
				case 1: uni.navigateTo({
					url: "../add-input/add-input"
				}); break;
			}
		},
		methods: {
			tabTap(index){
				this.tabIndex = index;
			},
			tabChange(e){
				this.tabIndex = e.detail.current;
			},
			loadmore(index){
				if(this.infoList[index].loadtext != "上拉加载更多") return;
				this.infoList[index].loadtext = "加载中...";
				setTimeout(()=>{
					let obj ={
								userpic: "../../static/demo/userpic/12.jpg",
								username: "昵称",
								isguanzhu: false,
								title: "大大的标题",
								type: "img", 	// img|video
								titlepic: "../../static/demo/datapic/11.jpg",
								playnum: '20w',
								playtime: '2:47',
								infonum: {
									status: 0,	// 0-没有操作，1-顶，2-踩
									dingnum: 11,
									cainum: 11
								},
								commentnum: 10,
								sharenum: 10,
							}
					this.infoList[index].list.push(obj);
					this.infoList[index].loadtext = "上拉加载更多";
				},500);
				
			}
		}
	}
</script>

<style>
	
</style>
